<template>
  <div :class="[liveLinksBoxClass]">
    <ul class="ul-box">
      <li v-for="(v,i) in imgArraryData" @click="clickImg(v.imgLink)" :key="i">
        <img :src="v.img + '?x-oss-process=image/resize,m_fixed,h_196,w_346'" />
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      noNavLength: String, //noNav  没有nav
      roomInfo: Object,
    },
    data() {
      return {
        liveLinksBoxClass: '',
        imgArraryData: [],
        getPlatform: fun.getPlatform(), //app wx
      }
    },
    created() {
      if (this.noNavLength == 'noNav') {
          this.liveLinksBoxClass = 'no-nav'
      } else {
          this.liveLinksBoxClass = 'live-links-box';
      };
      this.getTuWenDataImg();
    },
    mounted() {},
    methods: {
      // 获取图片列表
      getTuWenDataImg() {
        this.$http.get('/h5live/getImgLinkList?anchor=' + this.roomInfo.roomInfo.anchor).then((res) => {
          const {
            code,
            data
          } = res.data
          if (code == '000000') {
            this.imgArraryData = data;
          }
        }, (err) => {
          console.log(err);
        })
      },
      clickImg(imglink) {
        if (imglink) {
          const item = {
						'link':imglink,
						'linkType':1
					}
			    fun.linkUrlFloatVideo(item);
        }
      }
    }
  }
</script>

<style scoped="scoped">
  ::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .live-links-box {
    width: 100%;
    height: calc(100vh - 564px);
  }

  .no-nav {
    width: 100%;
    height: calc(100vh - 494px);
  }

  .ul-box {
    width: 100%;
    height: 100%;
    padding: 0 2.5%;
    font-size: 0;
    float: left;
    overflow-y: scroll;
  }

  .ul-box li {
    width: 48.6%;
    margin-top: 22px;
    box-sizing: border-box;
    float: left;
  }

  .ul-box li:nth-of-type(odd) {
    margin-right: 18px;
  }

  .ul-box li img {
    width: 100%;
    height: 196px;
    border-radius: 10px;
  }
</style>
